<script setup></script>

<template>
  <div class="container mx-auto p-8">
    <h1 class="mb-6 text-2xl font-bold">Avatar Component</h1>

    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Basic Avatar</h3>
        <div class="flex flex-col space-y-6">
          <div>
            <h4 class="mb-2 text-sm font-medium">Avatar with Image</h4>
            <div class="flex items-center space-x-4">
              <Avatar
                src="https://placehold.co/400x400/4338ca/ffffff?text=JS"
                alt="User Avatar"
              />
              <div>
                <p class="font-medium">John Smith</p>
                <p class="text-sm text-gray-500">Product Manager</p>
              </div>
            </div>
          </div>

          <div>
            <h4 class="mb-2 text-sm font-medium">Avatar with Initials</h4>
            <div class="flex items-center space-x-4">
              <Avatar>
                <span>JD</span>
              </Avatar>
              <div>
                <p class="font-medium">Jane Doe</p>
                <p class="text-sm text-gray-500">UI Designer</p>
              </div>
            </div>
          </div>

          <div>
            <h4 class="mb-2 text-sm font-medium">Avatar with Icon</h4>
            <div class="flex items-center space-x-4">
              <Avatar>
                <span>👤</span>
              </Avatar>
              <div>
                <p class="font-medium">Guest User</p>
                <p class="text-sm text-gray-500">Visitor</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Avatar Variations</h3>
        <div class="flex flex-col space-y-6">
          <div>
            <h4 class="mb-2 text-sm font-medium">Size Variations</h4>
            <div class="flex items-center space-x-4">
              <Avatar size="tiny">
                <span>XS</span>
              </Avatar>
              <Avatar size="extra-small">
                <span>S</span>
              </Avatar>
              <Avatar size="small">
                <span>M</span>
              </Avatar>
              <Avatar size="medium">
                <span>L</span>
              </Avatar>
              <Avatar size="large">
                <span>XL</span>
              </Avatar>
              <Avatar size="extra-large">
                <span>2XL</span>
              </Avatar>
            </div>
          </div>

          <div>
            <h4 class="mb-2 text-sm font-medium">Shape Variations</h4>
            <div class="flex items-center space-x-4">
              <Avatar
                shape="circle"
                src="https://placehold.co/400x400/4338ca/ffffff?text=C"
              />
              <Avatar
                shape="square"
                src="https://placehold.co/400x400/4338ca/ffffff?text=S"
              />
            </div>
          </div>

          <div>
            <h4 class="mb-2 text-sm font-medium">Avatar Group</h4>
            <div class="flex -space-x-2">
              <Avatar
                src="https://placehold.co/400x400/4338ca/ffffff?text=1"
                outline
              />
              <Avatar
                src="https://placehold.co/400x400/22c55e/ffffff?text=2"
                outline
              />
              <Avatar
                src="https://placehold.co/400x400/ef4444/ffffff?text=3"
                outline
              />
              <Avatar outline>
                <span>+2</span>
              </Avatar>
            </div>
          </div>

          <div>
            <h4 class="mb-2 text-sm font-medium">With Badge</h4>
            <div class="relative inline-block">
              <Avatar
                src="https://placehold.co/400x400/4338ca/ffffff?text=JS"
              />
              <span
                class="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-green-500 ring-2 ring-white"
              ></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
